import { Toast } from 'antd-mobile';
import Header from '../../components/Header/Header';
import React, { useContext, useState } from 'react'
import { Form, Input, Button } from "antd-mobile"
import { MyContext } from '../../App';
import { reqregister } from '../../http/api';
import "./register.less"
import img from "../../assets/img/pic_logo_orange.png"

const Register = (props) => {
    // 1.初始化表单数据
    const [user, setUser] = useState({
        phone: "",
        nickname: "",
        password: "",
    });
    const { state, dispatch } = useContext(MyContext);

    // 3.登录的逻辑
    const register = () => {
        reqregister(user).then(res => {
            if (res.data.code == 200) {
                //弹成功
                Toast.show({
                    content: res.data.list
                })
                //跳转页面
                props.history.push("/Login")
            }
        })
    }

    return (
        <div className='register'>
            <Header text="注册" back></Header>
            <Form layout='horizontal'>
                <img src={img} alt="" />
                <Form.Item label='手机号' name='phone'>
                    <Input placeholder='请输入手机号' onChange={(e) => setUser({ ...user, phone: e })} clearable />
                </Form.Item>
                <Form.Item label='用户名' name='nickname'>
                    <Input placeholder='请输入用户名' onChange={(e) => setUser({ ...user, nickname: e })} clearable />
                </Form.Item>
                <Form.Item label='密码' name='password'>
                    <Input placeholder='请输入密码' onChange={(e) => setUser({ ...user, password: e })} clearable type='password' />
                </Form.Item>
                <Button block color="primary" size="large" onClick={register}>
                    注册
                </Button>
            </Form>
        </div>
    )
}

export default Register